import React from 'react'
import { useDispatch } from 'react-redux'
import { allTesk ,deleteAll} from '../../../store/Slice/taskReducer'

export default function Footer({tesk}) {
    const success = tesk.reduce((prev,item)=> item.check? prev+1:prev,0)
    const dispatch = useDispatch()

    const allHandle=(e)=>{
      const state=  e.target.checked
        dispatch(allTesk(state))
    }

    const deleteAllHandle=()=>{
        dispatch(deleteAll())
    }

    return (
        <div>
            <div className="todo-footer">
                <label>
                    <input type="checkbox" onChange={allHandle} checked={success===tesk.length&&tesk.length!==0?true:false}/>
                </label>
                <span>
                    <span>已完成{success}</span> / 全部{tesk.length}
                </span>
                <button onClick={deleteAllHandle} className="btn btn-danger">清除已完成任务</button>
            </div>
        </div>
    )
}
